<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        background-color: hsl(210, 80%, 20%);
        font-family: Helvetica, Arial, sans-serif;
      }

      img {
        max-inline-size: 100%;
      }

      .card {
        max-inline-size: 300px;
        padding: 0.5em;
        margin-inline: auto;
        background-color: white;
        transform: translate(50px, 0) rotate(15deg);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <img src="images/chicken1.jpg" alt="a chicken" />
      <h4>Mrs. Featherstone</h4>
      <p>
        She may be a bit frumpy, but Mrs. Featherstone gets the job done. She
        lays her largish cream-colored eggs on a daily basis. She is gregarious
        to a fault.
      </p>
      <p>This Austra White is our most prolific producer.</p>
    </div>
  </body>
</html>
